<template>
  <div class="container">
    <div>
      <span class="left-container">
        <el-button type="primary" icon="el-icon-back" @click="backHandle" />
        <span
          style="font-weight: bold; margin-left: 12px"
        >回款单号: {{ headerInfo.paymentPlanOrderNo }}</span>
      </span>
    </div>
    <div style="margin-top: 16px">
      <span>{{
        getStatusText(
          headerInfo.checkingStatus,
          checking_status_options
        )
      }}</span>
    </div>
  </div>
</template>
<script>
import { getStatusText } from '@/utils/tools'

export default {
  name: 'DetailHeader',
  components: {
  },
  props: {
    headerInfo: {
      type: Object,
      default: () => {
        return {
        }
      }
    }
  },
  data() {
    return {
      checking_status_options: []
    }
  },
  computed: {
    allOptions() {
      return this.$store.getters.allOptions
    }
  },
  mounted() {
    this.queryAllOptionsHandle()
  },
  methods: {
    getStatusText,
    backHandle() {
      this.$router.back()
    },
    // 请求option
    async queryAllOptionsHandle() {
      // 核账状态：checking_status
      this.checking_status_options =
        await this.$store.dispatch('base/getBaseDataList', {
          type: 'checking_status'
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  margin: 12px;
  width: calc(100% - 24px);
  .header-container {
    display: flex;
    justify-content: space-between;
    .left-container {
      display: flex;
      align-items: center;
    }
  }
}
</style>
